import { useState } from "react";
import { connect } from "umi";
import { Table, Drawer } from "antd";

const PageTable = (props: any) => {
  const {
    tableData,
    dispatch,
    total,
    loading,
    pageNumber,
    pageSize,
    formParams: { pageNum },
  } = props;
  const [open, setOpen] = useState(false);
  const toggleDraw = () => {
    setOpen(!open);
  };
  const columns = [
    {
      title: "序号",
      dataIndex: "order",
      key: "order",
      render: (text, record, index) => {
        return `${
          ((pageNumber ? pageNumber : 1) - 1) * (pageSize ? pageSize : 10) +
          (index + 1)
        }`;
      },
    },
    {
      title: "操作人员",
      dataIndex: "operName",
      key: "operName",
      // render: (_) => (_ ? _ : '-'),
    },
    // {
    //   title: '所在部门',
    //   dataIndex: 'deptName',
    //   key: 'deptName',
    //   render: (_) => (_ ? _ : '-'),
    // },
    {
      title: "手机号",
      dataIndex: "operName",
      key: "operName",
      render: (_) => (_ ? _ : "-"),
    },
    // {
    //   title: '身份证号',
    //   dataIndex: 'identityCard',
    //   key: 'identityCard',
    //   render: (_) => (_ ? _ : '-'),
    // },
    {
      title: "操作项目",
      dataIndex: "businessType",
      key: "businessType",
      render: (_) =>
        _ == 0
          ? "其他"
          : _ == 1
          ? "新增"
          : _ == 2
          ? "修改"
          : _ == 3
          ? "删除"
          : _ == 5
          ? "导出"
          : _ == 7
          ? "强退"
          : "-",
    },
    {
      title: "系统模块",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "操作端",
      dataIndex: "operatorType",
      key: "operatorType",
      render: (_) => (_ == 0 ? "其他" : _ == 1 ? "后台用户" : "手机端用户"),
    },
    {
      title: "操作结果",
      dataIndex: "status",
      key: "status",
      render: (_) => (_ == 1 ? "异常" : "正常"),
    },
    {
      title: "操作时间",
      dataIndex: "operTime",
      key: "operTime",
    },
    {
      title: "IP地址",
      dataIndex: "operIp",
      key: "operIp",
    },
  ];
  const changeTable = (e) => {
    dispatch({
      type: "SystemOperateLog/queryTableData",
      params: {
        pageNum: e.current,
        pageSize: e.pageSize,
      },
    });
  };
  return (
    <div>
      <Table
        dataSource={tableData}
        columns={columns}
        rowKey={(record) => record.id}
        pagination={{
          total,
          showTotal: (total) => `共 ${total} 条`,
          defaultCurrent: 1,
          current: pageNum,
        }}
        onChange={changeTable}
        loading={loading}
      />
      <Drawer
        title="Basic Drawer"
        placement="right"
        onClose={toggleDraw}
        open={open}
      />
    </div>
  );
};

export default connect(({ SystemOperateLog, loading }) => ({
  ...SystemOperateLog,
  loading: loading.effects["SystemOperateLog/queryTableData"],
}))(PageTable);
